<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <script src="../lib/flexible.js"></script>
    <link rel="stylesheet" href="../lib/vant.css" />
    <link rel="stylesheet/less" href="../style/index.less" />
    <script src="../lib/less.min.js"></script>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vant.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/base64.min.js"></script>
    <script ignore src="../js/env.js"></script>
    <script ignore src="../js/utils.js"></script>
    <title>数据明细</title>
  </head>
  <body>
    <div id="app">
      <div class="home-flowPath-container">
        <div
          class="nav-bar-container"
          :style="{
paddingTop: (client == 'App' ? statusBarHeight || 20 : 0) + 'px',   
background: '#385AF9',
}"
        >
          <van-nav-bar
            @click-left="onClickBack($event)"
            left-arrow
            :style="{ background: '#385AF9'}"
          >
            <template #left>
              <van-icon name="arrow-left" :size="22" color="#FFFFFF" />
            </template>
            <template #title>
              <div class="van-nav-bar-title" :style="{ color: '#FFFFFF' }">
                数据明细
              </div>
            </template>
          </van-nav-bar>
        </div>
        <div class="open-container">
          <div class="pull-refresh-container">
            <van-pull-refresh
              :value="loading"
              @refresh="onRefresh"
              ref="pull-refresh"
            >
              <div style="height: 100%">
                <div class="card-list" v-for="(v, i) in tableData" :key="i">
                  <div class="title">{{ v.equName }}</div>
                  <div class="row">
                    <div class="lable">生产线：</div>
                    <div class="value">{{ v.dicDesc }}</div>
                  </div>
                  <div class="row">
                    <div class="lable">梁号：</div>
                    <div class="value">{{ v.componentParts }}</div>
                  </div>
                  <div class="line-row">
                    <div class="item">
                      <div class="lable">蒸养房启动状态：</div>
                      <div class="value">
                        {{ v.curingstate == "true" ? "是" : "否" }}
                      </div>
                    </div>
                    <div class="item">
                      <div class="lable">蒸养运行状态：</div>
                      <div class="value">
                        {{ v.workstate == "true" ? "是" : "否" }}
                      </div>
                    </div>
                  </div>
                  <van-collapse v-model="activeName" accordion>
                    <van-collapse-item :name="v.id">
                      <template #title>
                        <div>更多</div>
                      </template>
                      <template #right-icon>
                        <div
                          class="arrow-icon"
                          :class="[activeName.indexOf(v.id) > -1 ? 'open' : 'close']"
                        >
                          <van-icon
                            name="arrow-up"
                            :color="
                                activeName.indexOf(v.id) > -1 ? '#FFFFFF' : '#8E8E8E'
                              "
                            :style="{
                                rotate:
                                  activeName.indexOf(v.id) > -1 ? '0deg' : '180deg',
                                transition: '0.5s',
                              }"
                          />
                        </div>
                      </template>
                      <div @click.stop="() => {}">
                        <div class="row">
                          <div class="lable">蒸养设定温度(℃)：</div>
                          <div class="value">{{ v.settemp }}</div>
                        </div>
                        <div class="row">
                          <div class="lable">蒸养升温运行状态：</div>
                          <div class="value">
                            {{ v.risetempstate == "true" ? "是" : "否" }}
                          </div>
                        </div>
                        <div class="row">
                          <div class="lable">蒸养恒温运行状态：</div>
                          <div class="value">
                            {{ v.constanttempstate == "true" ? "是" : "否" }}
                          </div>
                        </div>
                        <div class="row">
                          <div class="lable">蒸养降温运行状态：</div>
                          <div class="value">
                            {{ v.lowertempstate == "true" ? "是" : "否" }}
                          </div>
                        </div>
                        <div class="row">
                          <div class="lable">蒸养升温时间设定(h)：</div>
                          <div class="value">{{ v.risetempsitehour }}</div>
                        </div>
                        <div class="row">
                          <div class="lable">蒸养升温时间设定(min)：</div>
                          <div class="value">{{ v.risetempsiteminute }}</div>
                        </div>
                        <div class="row">
                          <div class="lable">蒸养恒温时间设定(h)：</div>
                          <div class="value">{{ v.constanttempsitehour }}</div>
                        </div>
                        <div class="row">
                          <div class="lable">蒸养恒温时间设定(min)：</div>
                          <div class="value">
                            {{ v.constanttempsiteminute }}
                          </div>
                        </div>
                        <div class="row">
                          <div class="lable">蒸养降温时间设定(h)：</div>
                          <div class="value">{{ v.lowertempsitehour }}</div>
                        </div>
                        <div class="row">
                          <div class="lable">蒸养降温时间设定(min)：</div>
                          <div class="value">{{ v.lowertempsiteminute }}</div>
                        </div>
                        <div class="row">
                          <div class="lable">蒸养升温运行时间(h)：</div>
                          <div class="value">{{ v.risetemprunhour }}</div>
                        </div>
                        <div class="row">
                          <div class="lable">蒸养升温运行时间(min)：</div>
                          <div class="value">{{ v.risetemprunminute }}</div>
                        </div>
                        <div class="row">
                          <div class="lable">蒸养恒温运行时间(h)：</div>
                          <div class="value">{{ v.constanttemprunhour }}</div>
                        </div>
                        <div class="row">
                          <div class="lable">蒸养恒温运行时间(min)：</div>
                          <div class="value">{{ v.constanttemprunminute }}</div>
                        </div>
                        <div class="row">
                          <div class="lable">蒸养降温运行时间(h)：</div>
                          <div class="value">{{ v.lowertemprunhour }}</div>
                        </div>
                        <div class="row">
                          <div class="lable">蒸养降温运行时间(min)：</div>
                          <div class="value">{{ v.lowertemprunminute }}</div>
                        </div>
                        <div class="row">
                          <div class="lable">蒸养运行总时间(h)：</div>
                          <div class="value">{{ v.worktimehour }}</div>
                        </div>
                        <div class="row">
                          <div class="lable">蒸养运行总时间(min)：</div>
                          <div class="value">{{ v.worktimeminute }}</div>
                        </div>
                        <div class="row">
                          <div class="lable">蒸养房阀门开合度：</div>
                          <div class="value">{{ v.openangle }}</div>
                        </div>
                        <div class="row">
                          <div class="lable">喷淋运行状态：</div>
                          <div class="value">
                            {{ v.spraystate == "true" ? "是" : "否" }}
                          </div>
                        </div>
                        <div class="row">
                          <div class="lable">喷淋阀运行间隔时间设定(mm)：</div>
                          <div class="value">{{ v.spraysettime }}</div>
                        </div>
                        <div class="row">
                          <div class="lable">喷淋运行总时间(h)：</div>
                          <div class="value">{{ v.spraytimehour }}</div>
                        </div>
                        <div class="row">
                          <div class="lable">喷淋运行总时间(mm)：</div>
                          <div class="value">{{ v.spraytimeminute }}</div>
                        </div>
                        <div class="row">
                          <div class="lable">位置1温度(℃)：</div>
                          <div class="value">{{ v.tempsite1 }}</div>
                        </div>
                        <div class="row">
                          <div class="lable">位置2温度(℃)：</div>
                          <div class="value">{{ v.tempsite2 }}</div>
                        </div>
                        <div class="row">
                          <div class="lable">位置3温度(℃)：</div>
                          <div class="value">{{ v.tempsite3 }}</div>
                        </div>
                        <div class="row">
                          <div class="lable">位置1湿度(%RH)：</div>
                          <div class="value">{{ v.humsite1 }}</div>
                        </div>
                        <div class="row">
                          <div class="lable">位置2湿度(%RH)：</div>
                          <div class="value">{{ v.humsite2 }}</div>
                        </div>
                        <div class="row">
                          <div class="lable">位置3湿度(%RH)：</div>
                          <div class="value">{{ v.humsite3 }}</div>
                        </div>
                      </div>
                    </van-collapse-item>
                  </van-collapse>
                </div>
              </div>
              <!-- 触底文案 -->
              <div
                class="reach-bottom-container"
                v-if="isReachBottomText && !loading"
              >
                <van-loading size="24px" v-if="!reachBottomFinished">
                  加载中...
                </van-loading>
                <div class="no-more-data" v-else>~没有更多了~</div>
              </div>
            </van-pull-refresh>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
<script type="module">
  var app = new Vue({
    el: "#app",
    data() {
      return {
        //是否处于加载中状态
        loading: false,
        //【触底】是否加载结束
        reachBottomFinished: false,
        //是否显示触底文案
        isReachBottomText: false,
        tableData: [],
        activeName: [],
        //
        statusBarHeight: 0,
        client: "",
      };
    },
    mounted() {
      let { statusBarHeight, client } = getLoginData();
      this.client = client;
      if (client == "App") {
        this.statusBarHeight = statusBarHeight;
      } else {
        this.statusBarHeight = 0;
      }
      this.$nextTick((_) => {
        this.initOperate();
        this.getTableData();
      });
    },
    methods: {
      onClickBack() {
        window.history.back();
      },
      initOperate() {
        let scrollview = this.$refs["pull-refresh"]?.$el;
        scrollview.addEventListener(
          "scroll",
          debounce((e) => {
            if (
              Math.ceil(e.target.scrollTop + e.target.clientHeight) >=
              e.target.scrollHeight
            ) {
              //触底
              (!this.reachBottomFinished || !this.isReachBottomText) &&
                this.onReachBottom();
            }
          }, 500),
          true
        );
      },
      clacSize() {
        let scrollview = this.$refs["pull-refresh"]?.$el;
        if (scrollview.scrollHeight <= scrollview.clientHeight) {
          this.isReachBottomText = false;
          return false;
        }
        return true;
      },

      //触底加载
      onReachBottom() {},

      //下拉刷新开启
      onRefresh() {
        this.loading = true;
        this.getTableData();
      },

      //查询列表数据
      getTableData() {
        this.$toast.loading({
          duration: 0,
          forbidClick: true,
          message: "页面加载中",
        });
        let { token, tenantCode } = getLoginData();
        let { componentParts } = JSON.parse(localStorage.getItem("dataSource"));
        return new Promise((resolve, reject) => {
          axios({
            method: "POST",
            headers: {
              Authorization: `Bearer ${token}`,
              Tenantcode: tenantCode,
            },
            url: `${YX_BASE_API_URL}/beam/quality-ys-data-detail/queryRealTimeDataList`,
            responseType: "json",
            data: {
              componentParts,
              equType: "17",
            },
          })
            .then((res) => {
              let {
                data: { data },
              } = res;
              this.tableData = data?.result || [];
              resolve();
            })
            .catch((_) => {
              this.tableData = [];
              reject();
            })
            .finally((_) => {
              //关闭下拉刷新
              setTimeout(() => {
                this.$toast.clear();
                this.loading = false;
              }, 500);
            });
        });
      },
    },
    destroyed() {
      this.$toast.clear();
    },
  });
</script>
